<template>
  <div class="info-box" ref="scrollIntoView">
    <p class="info-title">{{ info.name }}</p>
    <div class="info-shear">
      <div class="shear-left">
        <span v-if="info.typeId" class="shear-left-heard" :style="{ backgroundColor: store.styleInfo.auxiliaryColor }">
          <!-- {{ info.typeId == 401792425939013 ? '研究' : info.typeId == 401792277585989 ? '刊物' : '论文' }} -->

          {{
            info.typeId == 401792425939013
              ? '课题研究'
              : info.typeId == 401792277585989
              ? '出版刊物'
              : info.typeId == 401792091619397
              ? '论文论著'
              : ''
          }}
        </span>

        <div class="left-title-box">
          <span class="left-title-box-title1">作者</span>
          <span class="left-title-box-title2">{{ info.author }}</span>
        </div>
        <div class="left-title-box">
          <span class="left-title-box-title1">出版社</span>
          <span class="left-title-box-title2">{{ info.publisher }}</span>
        </div>
      </div>
      <div class="shear-box">
        <div
          @click="AddLikes"
          class="shear-right"
          :style="{
            borderColor: store.styleInfo.themeColor,
            color: store.styleInfo.themeColor,
          }"
        >
          <t-icon v-if="!info.isLike" name="thumb-up" size="16" :style="{ color: store.styleInfo.themeColor }"></t-icon>
          <span>{{ info.isLike ? '已点赞' : '点赞' }}</span>
        </div>

        <t-popup content="" placement="bottom">
          <template #content>
            <shear @shearType="shearType" />
          </template>

          <div
            class="shear-right"
            :style="{
              borderColor: store.styleInfo.themeColor,
              color: store.styleInfo.themeColor,
            }"
          >
            <t-icon name="link" size="16" :style="{ color: store.styleInfo.themeColor }"></t-icon>

            <span>分享</span>
          </div>
        </t-popup>
      </div>
    </div>
    <div class="line"></div>
    <div
      class="info-content"
      :style="{
        fontSize: store.styleInfo.contentSize,

        color: store.styleInfo.fontColor,
      }"
      v-html="info.content"
    ></div>
    <div class="pdf-box" v-if="source">
      <div class="pdf-heard">
        <span class="heard-title">{{ title }}</span>
        <div class="heard-right">
          <!-- <t-icon @click="addLevel(1)" name="minus-rectangle" style="color: #f3f3f3; margin-right: 15px"> </t-icon> -->
          <!-- <t-icon @click="addLevel(2)" name="add-rectangle" style="color: #f3f3f3; margin-right: 15px"> </t-icon> -->
          <!-- <t-icon name=""> </t-icon> -->
          <t-icon @click="setFullScreen" name="fullscreen" style="color: #f3f3f3; margin-right: 15px"> </t-icon>
        </div>
      </div>
      <div class="pdf-scroll" id="pdfCodeID">
        <vue-pdf-embed class="vue-pdf-embed" :source="source" :style="{ width: level + '%', height: 'auto' }" />
      </div>
    </div>
    <div class="line" v-if="source || info.content"></div>
    <div class="resources-box" v-if="info.data && info.data.length > 0">
      <p class="resources-url">附件资源</p>
      <t-row :gutter="20">
        <t-col :span="4" v-for="(item, index) in info.data" :key="index">
          <div class="downLoad-box">
            <img :src="getimgUrl(item.url)" alt="" />
            <div class="downLoad-right">
              <div class="downLoad-right-child">
                <span class="right-title1">{{ item.name }}</span>
                <div class="right-title2">({{ (item.size / 10000).toFixed(1) }}M)</div>
              </div>
              <a :href="urls + item.url" class="right-title3" download="" target="_blank">下载</a>
              <!-- <span class="right-title3"></span> -->
            </div>
          </div>
        </t-col>
      </t-row>
    </div>
    <div class="resources-box" v-if="info.url">
      <p class="resources-url">原文链接</p>
      <p class="resources-url1" @click="linkUrl(info.url)">{{ info.url }}</p>
    </div>
  </div>
  <NavVue @top="top" :flag="true"></NavVue>
  <messageModel
    submitText="前往"
    title="提示"
    :visible="visibleMessage1"
    problem="您暂未登录"
    message="是否前往登录？"
    @closeClick="closeClick"
    @submitClick="pathSubmitClick"
  />
</template>

<script setup lang="ts">
import { toQQzone, toQQ, toWeibo, toWechat } from '@/utils/shear';
import { AddLike } from '@/api/door/door';
import { urls } from '@/utils/request/upload';
import shear from '@/components/shear/shear.vue';
import VuePdfEmbed from 'vue-pdf-embed';
import { getHeardToken } from '@/api/utils';
import { investigationDetail } from '@/api/investigation/investigation';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useProjectStore } from '@/store';
import { outLogin } from '@/utils/minxin';
import NavVue from './components/nav.vue';
import messageModel from '@/components/messageModel/index.vue';
const FullScreen = ref(false);
const level = ref(100);
const store = useProjectStore();
const title = ref('');
const route = useRoute();
const source = ref('');
const scrollIntoView = ref(null);
const info: any = ref({
  author: '',
  content: '',
  data: [],
  id: 0,
  name: '',
  pdfData: [],
  publisher: '',
  typeId: 0,
  url: '',
});
const visibleMessage1 = ref(false);
const closeClick = () => {
  //取消
  visibleMessage1.value = false;
};
const pathSubmitClick = () => {
  //确认登陆

  visibleMessage1.value = false;
  let url = window.location.href;
  let redirectUrl = 'http://wz.wuzhan.art/#/login?redirect=' + url;
  outLogin(redirectUrl);
};
const init = async () => {
  try {
    let res = await investigationDetail(Number(route.query.id));
    if (res.data.pdfData.length !== 0) {
      console.log(source.value);
      source.value = urls + res.data.pdfData[0].url;
      title.value = res.data.pdfData[0].name;
      // console.log(urls + res.data.pdfData[0].url);
    }
    //res.data
    info.value = res.data;
  } catch {}
};
init();
const AddLikes = () => {
  let token = getHeardToken();
  if (!token) {
    visibleMessage1.value = true;
    return;
  }
  AddLike({
    refType: 7,
    refId: info.value.id,
  }).then((res) => {
    info.value.isLike = res.data;
  });
};
const shearType = (e: number) => {
  let url = window.location.href;
  let title = info.value.name;
  switch (e) {
    case 1:
      toQQzone(url, title);
      break;
    case 2:
      toQQ(url, title);
      break;
    case 3:
      toWeibo(url, title);
      break;
    default:
      toWechat(url, title);
      break;
  }
};
const addLevel = (e: number) => {
  if (e === 1) {
    if (level.value == 20) {
    } else {
      level.value = level.value - 20;
    }
  } else {
    level.value = level.value + 20;
  }
};
const setFullScreen = () => {
  let element: any = document.getElementById('pdfCodeID'); //需要全屏容器的id
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
};
const getimgUrl = (e: string): string => {
  if (e.indexOf('doc') !== -1) {
    return 'https://static.jiyi.show/assets/img/word.png';
  } else if (e.indexOf('.mp4') !== -1 || e.indexOf('.mp3') !== -1) {
    return 'https://static.jiyi.show/assets/img/video.png';
  } else {
    return 'https://static.jiyi.show/assets/img/rar.png';
  }
};
const linkUrl = (url: any) => {
  window.open(url, '_blank');
};
const top = () => {
  scrollIntoView.value.scrollIntoView({ behavior: 'smooth' });
};
</script>

<style lang="less" scoped>
.line {
  width: 100%;
  height: 1px;
  background: #e6e6e6;
  // box-shadow: inset 0px -1px 0px 0px #e6e6e6;
  margin: 32px 0;
}
.info-box {
  padding: 80px 0px;
  width: 1180px;
  margin: 0 auto;
}
.info-title {
 
  word-break: break-all;
  margin: 0 auto;
  font-size: 34px;
  font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
  // font-weight: bold;
  color: #333333;
  line-height: 52px;
  text-align: center;
  margin-bottom: 52px;
}
.info-content {
  font-size: 17px;
  // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  // font-weight: 500;
  color: #333333;
  line-height: 32px;
  font-family: none;
  text-indent: 2em;
  :deep(*) {
    font-family: none;
    text-indent: 2em;
  }
  // margin-top: 50px;
}
.pdf-box {
  width: 100%;
  height: 680px;
  display: flex;
  flex-direction: column;
  background: #2a2826;

  margin: 50px 0;
}
.pdf-heard {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 16px 24px;
  background: #393732;
  box-shadow: 0px 2px 2px 0px rgba(28, 31, 34, 0.4);
  .heard-title {
    font-size: 16px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 24px;
  }
}
.pdf-scroll {
  flex: 1;
  width: calc(100% - 160px);
  margin: auto;
  margin-top: 50px;

  overflow: scroll;
}
.pdf-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.pdf-scroll::-webkit-scrollbar-thumb {
  background: #757371;
  border-radius: 6px;
  // display: none;
}
.pdf-scroll::-webkit-scrollbar-track {
  background: #4c4b46;
  border-radius: 6px;
}
.downLoad-box {
  display: flex;
  width: 100%;

  padding: 24px 28px;
  border-radius: 3px;
  border: 1px solid #dcdcdc;
  margin-bottom: 8px;
  img {
    width: 56px;
    height: 56px;
  }
}
.downLoad-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // margin-left: 12px;
}
.downLoad-right-child {
  display: flex;
  align-items: center;
}
.right-title1 {
  width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}
.right-title2 {
  font-size: 14px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
  margin-left: 8px;
}
.right-title3 {
  font-size: 16px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #c7ab8b;
  line-height: 24px;
  text-decoration: underline;
  cursor: pointer;
}
.info-shear {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shear-left {
  display: flex;
  // align-items: center;
}
.shear-right {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid transparent;
  margin-left: 20px;
  font-size: 14px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #cfbda8;
  line-height: 20px;
  span {
    margin-left: 3px;
  }
  img {
    width: 20px;
    height: 20px;
  }
}
.shear-left-heard {
  width: 86px;
  height: 28px;
  // padding: 2px 10px;
  background: #f0e9e1;
  border-radius: 4px;
  font-size: 16px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
  text-align: center;
  flex-shrink: 0;
}
.left-title-box {
  display: flex;
  // align-items: center;
  margin-left: 20px;
}
.left-title-box-title1 {
  font-size: 16px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
  flex-shrink: 0;
}
.left-title-box-title2 {
  width: 300px;
  word-break: break-all;
  margin-left: 8px;
  font-size: 16px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 24px;
}
.resources-url {
  font-size: 18px;
  // font-weight: 500;
  color: #000000;
  line-height: 28px;
}
.resources-url1 {
  cursor: pointer;
  font-size: 18px;
  // font-weight: 500;
  color: #cfbda8;
  line-height: 28px;
  text-decoration: underline;
  margin-top: 32px;
}
.vue-pdf-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  div {
    width: 100%;
  }
}
.shear-box {
  display: flex;
}
</style>
